<template>
    <div>
        <nav-bar>
            <template v-slot:default>用户登录</template>
        </nav-bar>
        <div class="registerlogo">
            <div>
                <img src="../../assets/images/MallLogo.png" height="250" width="250"/>
            </div>
            <van-form @submit="onSubmit">
                <van-field
                        v-model="email"
                        name="邮箱"
                        label="邮箱"
                        placeholder="请输入邮箱"
                        :rules="[{ required: true, message: '邮箱填写有错' }]"
                />
                <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                />

                <div style="margin: 16px;">
                    <div class="link-login" @click="$router.push({path:'/Register'})">没有账号，立即注册</div>
                    <van-button round block type="info" native-type="submit" color="#4FC08D">登录</van-button>
                </div>
            </van-form>
        </div>

    </div>
</template>

<script>
    import {useStore} from 'vuex'
    import {ref,toRefs,reactive} from 'vue'
    import {login} from "../../network/user";
    import NavBar from "../../components/common/navbar/NavBar";
    import {Notify, Toast} from 'vant'
    import {useRouter} from 'vue-router'
    export default {
        name: "Login",
        components:{
            NavBar
        },
        setup () {
            const router =useRouter();
            const store = useStore();
            const userinfo =reactive({
                email:'',
                password:'',
            })
            const onSubmit=()=>{
                login(userinfo).then(res=>{
                    window.localStorage.setItem('token',res.access_token);
                    store.commit('setIsLogin',true)
                    Toast.success('登陆成功');
                    userinfo.password='';
                    userinfo.email='';
                    store.dispatch('updateCart')
                    setTimeout(()=>{
                        router.push({path:'/User'})

                    },500)
                })
            }
            return{
                ...toRefs(userinfo),
                onSubmit
            }
        }
    }
</script>

<style scoped lang="scss">
    .registerlogo{
        margin-top: 20px;

    }
    .link-login{
        margin-bottom: 20px;
        color: #4fc08d;
        float: left;

    }
</style>